<template>
	<view class="">
		<view class="listbg">
			<template v-for="(item,index) in list">
				<view class="box9 flex-row upload flex">
					<text class="info2">{{item.mar_name}}</text>
					<view class="box10 flex-col justify-center align-center">
						<image class="pic1" referrerpolicy="no-referrer" :src="item.qr_image" />
					</view>
					<view class="box11 flex-col justify-between">
						<image class="label2" referrerpolicy="no-referrer" src="../static/icon_328@2x.png"
							@click="del(item,index)" />
						<text class="txt3" @click="upload(index)">重新上传二维码</text>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				goData: {
					status: 0,
					page: 1
				},
				img_list: [], //
				length: 1, //允许上传图片数量
				showAdd: true, //是否显示上传按钮
				uploadIndex: 0
			}
		},
		onLoad(e) {},
		//上拉加载
		onReachBottom: function() {
			if (this.loadingType == 2) {
				return uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
			}
			if (this.loadingType != 0) { //loadingType!=0;直接返回
				return false;
			}
			this.goData.page++;
			uni.showNavigationBarLoading(); //显示加载动画				
			this.getList(); //请求
		},
		onShow() {
			this.goData.page = 1;
			this.loadingType = 0;
			this.list = [];
			// 获取列表
			this.getList();
		},

		watch: {
			img_list() {
				if (!this.img_list.length) {
					return;
				}
				this.$set(this.list[this.uploadIndex], 'qr_image', this.img_list[0].path)
				this.up()
			}
		},
		methods: {
			// // 上传
			upload(index) {
				this.uploadIndex = index
				this.img_list = []
				this.$uploadImg(this.img_list, this.showAdd, this.length)
			},
			up() {
				let item = this.list[this.uploadIndex]
				console.log(item)
				this.$request('mar_service/updateCode', {
					mar_id: item.id,
					image: item.qr_image,
					serviceLogin: '111'
				}, 'POST').then(res => {
					if (res.status == 200) {
						// this.getList()
					}
				})
			},
			del(item, index) {
				this.uploadIndex = index
				let id = item.id
				let that = this
				uni.showModal({
					title: '是否确认删除二维码？',
					cancelText: '取消',
					confirmColor: '#E43D33',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.list[index].qr_image = ''
							console.log('用户点击确定');
							// 删除当前图片
							that.up()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getList() {
				this.$request('mar_service/fansCode', {
					...this.goData,
					serviceLogin: '111',
				}, 'GET').then(res => {
					if (res.status == 200) {
						this.list.push(...res.data);
						uni.hideNavigationBarLoading(); //关闭加载动画
						//如果长度小于等于0说明没有分页
						if (res.data.length < 15) {
							this.loadingType = 2; //没有更多了	
						} else {
							this.loadingType = 0; //请求成功让他返回上拉加载	
						}

					}
				})
			}
		},
	}
</script>
<style>
	@import '../common.css';
</style>
<style>
	.box9 {
		width: 690rpx;
		height: 200rpx;
		margin-top: 40rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.info2 {
		width: 167rpx;
		height: 28rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		font-family: MicrosoftYaHei;
		text-align: justifyLeft;
		white-space: nowrap;
		display: block;
	}

	.box10 {
		background-color: rgba(255, 255, 255, 1);
		height: 130rpx;
		border: 1px solid rgba(238, 238, 238, 1);
		margin-left: 30rpx;
		width: 130rpx;
	}

	.pic1 {
		width: 116rpx;
		height: 116rpx;
	}

	.box11 {
		width: 170rpx;
		height: 92rpx;
		margin: 14rpx 0 0 194rpx;
	}

	.label2 {
		width: 34rpx;
		height: 36rpx;
		margin-left: 135rpx;
	}

	.txt3 {
		text-shadow: 0px 3px 7px rgba(203, 171, 83, 0.91);
		width: 170rpx;
		height: 24rpx;
		overflow-wrap: break-word;
		color: rgba(16, 156, 122, 1);
		font-size: 24rpx;
		font-family: MicrosoftYaHei;
		text-align: right;
		white-space: nowrap;
		line-height: 24rpx;
		margin-top: 32rpx;
		display: block;
	}
</style>
